<template>
  <div v-if="this.visible==true">

    <a-table
      bordered
      size="small"
      :title="title"
      rowKey="tableKey"
      :columns="columns"
      :pagination="false"
      :expandedRowKeys="expandedRowKeys"
      @expand="handleExpand"
      :dataSource="dataSource">
      <template slot="type" slot-scope="text, record">
        <span v-if="text == 'main'">
          {{$t('m.eform.apptable.other.er_mainTable')}}
        </span>
        <span v-else-if="text == 'oneToOne'">
          {{$t('m.eform.eformConstant.objStructure.oneToOne')}}
        </span>
        <span v-else-if="text == 'oneToMany'">
          {{$t('m.eform.eformConstant.objStructure.oneToMany')}}
        </span>
      </template>
      <template slot="fks" slot-scope="fkList, record">
        <fk-edit v-if="record.type != 'main' && showFk" :fkList="fkList"
                 :col-tree="colTree"
                 :sub-table="record.tableKey" :main-table="findKey(record)"></fk-edit>
      </template>
    </a-table>

  </div>
</template>

<script>


  import { postAction } from '@/api/manage'
  import { EFormConstant } from '../../../../eform/EFormConstant'
  import FkEdit from './FkEdit'
  import { findAllKey, findParentKey } from '../../../../eform/modules/EformUtils'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'ObjRelationTable',
    components: {
      FkEdit
    },
    props: {
      objRelation: String,
    },
    data () {
      return {
        title: () => {
          return this.$t('m.eform.apptable.other.er_objectRelation')
        },
        objRelationText: this.objRelation,
        dataSource: [],
        visible: false,
        currentChildrenList: null,
        currentType: null,
        expandedRowKeys: [],
        selectTypeData: EFormConstant.objStructure2,
        showFk: false,
        objRelationVisible: false,
        colTree: {},
        columns: [
          {
            title: this.$t('m.eform.apptable.entity.tableName'),
            align: 'left',
            dataIndex: 'tableKey',
            customRender: function (t, r, index) {
              return r.tableComment + '(' + t + ')'
            }
          },
          {
            title: this.$t('m.eform.apptable.entity.er_type'),
            align: 'left',
            dataIndex: 'type',
            scopedSlots: { customRender: 'type' },
          },
          {
            title: this.$t('m.eform.apptable.entity.er_fks'),
            align: 'left',
            dataIndex: 'fks',
            scopedSlots: { customRender: 'fks' },
          },
        ],
        url: {
          getColTreeByBo: YchConstant.PREFIX_EFORM + '/manage/actAppObject/getColTreeByBo'
        }
      }
    },
    methods: {
      init (objRelation) {
        this.visible = false
        if (objRelation) {
          const json = JSON.parse(objRelation)
          this.dataSource = [json]
          this.addColTree(json)
        } else {
          this.dataSource = []
        }
        this.expandedRowKeys = findAllKey(this.dataSource)
        this.visible = true
      },

      handleExpand (expanded, record) {
        if (expanded) {
          this.expandedRowKeys.push(record.tableKey)
        } else {
          let keyIndex = this.expandedRowKeys.indexOf(record.tableKey)
          if (keyIndex >= 0) {
            this.expandedRowKeys.splice(keyIndex, 1)
          }
        }
      },

      addColTree (bo) {
        if (this.colTree[bo.tableKey]) {
          return
        }
        postAction(this.url.getColTreeByBo, bo).then((res) => {
          if (res.success) {
            this.colTree = Object.assign(this.colTree, res.result)
            this.showFk = true
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
        })
      },
      findKey (record) {
        return findParentKey(this.dataSource[0], record)
      },
      handleShowObjRelation () {
        this.objRelationVisible = !this.objRelationVisible
      }
    },
    watch: {
      objRelation (value) {
        this.objRelationText = value
      }
    }
  }
</script>
